<template>
  <el-drawer :title="title(edit)" size="45%" :before-close="handleClose" :visible.sync="visible" :wrapperClosable="false" ref="drawer">
    <div class="d-flex flex-column full-height" v-loading="loading">
      <div class="flex-grow-1 pa-3 overflow-auto">
        <el-form autocomplete="on" :model="customerForm" element-loading-text="给我一点时间"
          :rules="rules" label-position="right" label-width="100px" ref="customerFormRef">
          <el-form-item label="企业名称：" prop="name">
            <el-input v-model="customerForm.name" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contactPerson">
            <el-input v-model="customerForm.contactPerson" placeholder="请输入" maxlength="25"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="contactMobile">
            <el-input v-model="customerForm.contactMobile" placeholder="请输入" maxlength="25"></el-input>
          </el-form-item>
          <el-form-item label="地址：" prop="address">
            <el-input v-model="customerForm.address" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
        </el-form>
        <p class="head text-right">设备信息：</p>
        <div class="table-panel">
          <custom-table ref="table" :showPagination="false" :showIndex="false" :propData="devices" :autoHeight="true">
            <el-table-column v-for="(item, index) in tableField" :key="index" v-bind="item">
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template #default="{ row, $index }">
                <el-link :underline="false" type="primary" @click="handleEdit(row, $index)">编辑</el-link>
                <el-link :underline="false" type="danger" @click="handleDel($index)">删除</el-link>
              </template>
            </el-table-column>
          </custom-table>
          <div class="table-item-add d-flex align-center justify-center" @click="handleAddDevide">
            <i class="el-icon-circle-plus-outline"></i>
            <span>增加</span>
          </div>
        </div>
      </div>
      <div class="drawer__footer text-right">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </div>
    </div>
    <pop-devide :visible.sync="showPopDevide" :edit="devideEdit" :devideObj="devideObj" @devideCallBack="devideCallBack"></pop-devide>
  </el-drawer>
</template>
<script>
  import {
    addCustomer,
    editCustomer,
    getDevideList
  } from 'api/customer'
  import popDevide from './popDevide'
  import { deepCopy } from '@/utils'
  export default {
    components: { popDevide },
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      customerObj: Object,
      edit: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        loading: false,
        customerForm: {
          name: '',
          contactPerson: '',
          contactMobile: '',
          address: ''
        },
        // 表单验证
        rules: {
          name: [{
            required: true,
            trigger: 'blur',
            message: '请输入企业名称'
          }]
        },
        tableField: [
          {
            prop: 'name',
            label: '设备名称',
            align: 'center'
          },
          {
            prop: 'spec',
            label: '设备型号',
            align: 'center'
          },
          {
            prop: 'boxNo',
            label: '采集终端号',
            align: 'center'
          },
          {
            prop: 'imei',
            label: '定位器号',
            align: 'center'
          }
        ],
        devices: [],
        showPopDevide: false,
        devideEdit: '',
        devideObj: {}
      }
    },
    computed: {
      title() {
        return (str) => {
          if (str === 'add') return '新增客户'
          else if (str === 'edit') return '编辑客户'
        }
      }
    },
    watch: {
      visible(value) {
        if (value && this.edit === 'edit') {
          this.customerForm = deepCopy(this.customerObj)
          this.getDevideList()
        }
      }
    },
    methods: {
      getDevideList() {
        getDevideList(this.customerObj.customerId).then(res => {
          this.devices = res.data
        })
      },
      handleAddDevide() {
        this.devideEdit = 'add'
        this.showPopDevide = true
      },
      devideCallBack(json) {
        if (Object.prototype.hasOwnProperty.call(json, 'index')) {
          const index = json.index
          delete json.index
          this.devices.splice(index, 1, json)
        } else this.devices.push(json)
      },
      handleEdit(row, index) {
        this.devideEdit = 'edit'
        this.devideObj = row
        this.devideObj.index = index
        this.showPopDevide = true
      },
      handleDel(index) {
        this.devices.splice(index, 1)
      },
      onConfirm() {
        this.$refs['customerFormRef'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.submitCustomer()
          }
        })
      },
      submitCustomer() {
        const json = deepCopy(this.customerForm)
        json.devices = this.devices
        let fun
        if (this.edit === 'add') fun = addCustomer
        else if (this.edit === 'edit') fun = editCustomer
        fun(json).then(() => {
          this.$message.success('操作成功')
          this.handleClose()
          this.$emit('getList')
        }).finally(() => {
          this.loading = false
        })
      },
      handleClose() {
        this.$refs.customerFormRef.resetFields()
        this.customerForm = {
          name: '',
          contactPerson: '',
          contactMobile: '',
          address: ''
        }
        this.devices = []
        this.$emit('update:visible', false)
      }
    }
  }
</script>
<style lang="scss" scoped>
.el-input {
  width: 60%;
}
.head {
  height: 40px;
  line-height: 40px;
  padding-right: 12px;
  width: 100px;
  color: #606266;
  font-size: 14px;
}
.table-panel {
  border: 1px solid #EBEEF5;
  .table-item-add {
    cursor: pointer;
    height: 54px;
    color: #1890FF;
    i {
      font-size: 16px;
      margin-right: 8px;
    }
    span {
      font-size: 14px;
    }
  }
}
</style>